<template>
  <view class="coupon">
    <div class="top">
    <div class="border">
    <div class="img">
      <image class="tu" src="../../../static/design/default.png"></image>
    </div>
    <div class="five">
      <span>五一活动券</span><span>待使用</span>
    </div>
    <div class="date">
      有效时间2023年3月12日-2023年3月12日
    </div>
    </div>
    <div class="use">
      <div class="wz1">
        使用说明
      </div>
      <div class="wz2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean euismod bibendum laoreet. Proin gravida dolor sitamet lacus accumsan et viverra justo commodo. Proinsodales pulvinar sic tempor. Sociis natoque penatibus etmagnis dis parturient montes, nascetur ridiculus musNam fermentum, nulla luctus pharetra vulputate, felistellus mollis orci. sed rhoncus pronin sapien nunc accuaneget.
      </div>
    </div>
    </div>
    <div class="last">
      保存
    </div>
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .top{
    width: 100%;
    height: 1100rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 40rpx 45rpx;
  }
  .border{
    width: 100%;
    height: 430rpx;
    border: 1rpx solid black;
    margin-top: 15rpx;
  }
  .img{
    width: 100%;
    height: 300rpx;
  }
  .tu{
    width: 100%;
    height: 300rpx;
  }
  .five{
    width: 94%;
    height: 50rpx;
    display: flex;
    justify-content: space-between;
    margin-left: 3%;
    margin-top: 15rpx;
    font-size: 31rpx;
  }
  .date{
    width: 94%;
    height: 40rpx;
    font-size: 25rpx;
    margin-left: 3%;
    margin-top: 15rpx;
    color: darkgray;
  }
  .wz1{
    width: 100%;
    height: 30rpx;
    font-size: 30rpx;
    margin-top: 30rpx;
    font-weight: 700;
  }
  .wz2{
    width: 100%;
    height: 350rpx;
    margin-top: 10rpx;
  }
  .last{
    width: 100%;
    height: 130rpx;
    background-color: rgba(127, 127, 127, 1);
    color: #fff;
    font-size: 35rpx;
    line-height: 130rpx;
    text-align: center;
    position: fixed;
    bottom: 0rpx;
  }
</style>